<script setup>
</script>
<template>
    <div class="content">
        <div class="child1 child">1</div>
        <div class="child2 child">2</div>
        <div class="child3 child">3</div>
        <div class="child4 child">4</div>
        <div class="child5 child">5</div>
    </div>


</template>


<style scoped>
.content {
    display: flex;
    width: 1000px;
    height: 1000px;
    justify-content: space-between;
    padding: 30px;
    position: relative;
}

.child {
    width: 100px;
    height: 100px;
    background-color: aqua;
    border-radius: 50%;
}

.child2 {
    position: absolute;
    bottom: 30px;
    left: 30px;
}

.child3 {
    align-self: center;
}

.child4 {
    position: absolute;
    bottom: 30px;
    right: 30px;
}
</style>